﻿@page "/CanvasMultiRect1"

@using System.Diagnostics.CodeAnalysis
@using System.Drawing;
@using System.Reflection

@inject IJSRuntime jsRuntime


<style>
    #imageContainer {
        position: relative;
        width: 600px; /* 根据需要设置 */
        height: 400px; /* 根据需要设置 */
        overflow: hidden;
    }

        #imageContainer img {
            display: block;
        }

        #imageContainer svg {
            position: absolute;
            top: 0;
            left: 0;
        }

    #myCanvas {
        z-index: 1; /* 确保 canvas 在 img 之上 */
        position: absolute; /* 或者 relative, fixed, sticky */
    }

    #roiCanvas {
        z-index: 1; /* 确保 canvas 在 img 之上 */
        position: absolute; /* 或者 relative, fixed, sticky */
    }
</style>

<h3>CanvasMultiRect1</h3>

<input value="@PointJson" style="width: 600px; " />
<input @bind-value="@Width" style="width: 120px; " />
<input @bind-value="@Height" style="width: 120px; " />
<Button Text="Update Width/Height" OnClick="UpdateClick" />
<Button Text="Draw" OnClick="DrawClick" />

<Button Text="Draw Roi" OnClick="RoiDrawClick" />

<Button Text="ClearDraw" OnClick="ClearDrawClick" />
<Button Text="DeleteDraw" OnClick="DeleteRectClick" />

<div id="divCanvas" style="position: relative; width: 600px; height: 400px;">
    <canvas id="myCanvas" width="@Width" height="@Height">
    </canvas>
    <canvas id="roiCanvas" width="@Width" height="@Height">
    </canvas>
    <img id="myImage" src="@imageUrl" width="@Width" height="@Height" style="position: absolute; top: 0; left: 0;" />
</div>

<script src="./CanvasMultiRect1.js"></script>

@code {

    private string imageUrl = "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?0";

    private bool isMouseDown = false;

    private System.Drawing.Point? startPoint;

    private System.Drawing.Point? endPoint;

    private string PointJson = "123";

    private int Width { get; set; } = 600;

    private int Height { get; set; } = 400;

    private DotNetObjectReference<CanvasMultiRect1> dotNetObjectReference;

    private bool isCanDraw = false;

    private bool isSelectDraw = false;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await jsRuntime.InvokeVoidAsync("import", "./CanvasMultiRect1.js");
        await jsRuntime.InvokeVoidAsync("import", "./Resizer.js");
        if (firstRender)
        {
            await jsRuntime.InvokeVoidAsync("eval", @"
                function resizeImage(elementId, width, height) {
                    var img = document.getElementById(elementId);
                    if (img) {
                        img.style.width = width + 'px';
                        img.style.height = height + 'px';
                    }
                }
            ");

            // dotNetObjectReference = DotNetObjectReference.Create(this);
            // await jsRuntime.InvokeVoidAsync("initCanvas", dotNetObjectReference);
        }
    }

    public IJSObjectReference? RoiCanvasSingleRectModule;

    protected override async Task OnInitializedAsync()
    {           
        //修改元素
        await jsRuntime.InvokeVoidAsync("eval", @"
                function editCanvaseTop(elementId, isTop) {
                    var canvas = document.getElementById(elementId);
                    if (canvas) {
                        if(isTop)
                            canvas.style.zIndex = 2;
                         else    
                            canvas.style.zIndex = 1;
                    }
                }
            ");
        RoiCanvasSingleRectModule = await jsRuntime.InvokeAsync<IJSObjectReference>("import", "./CanvasRect1.js");
    }

    private RectangleInfo? SelectRect;

    [JSInvokable("MouseSelect")]
    public async Task MouseSelect(RectangleInfo line)
    {
        SelectRect = line;
        if (SelectRect != null)
        {
            isSelectDraw = true;
            PrintPoint();
        }
    }

    private void PrintPoint()
    {
        PointJson = System.Text.Json.JsonSerializer.Serialize(SelectRect);
        base.StateHasChanged();
    }

    private async Task DrawClick()
    {
        await jsRuntime.InvokeVoidAsync("editCanvaseTop", "roiCanvas", false);
        await jsRuntime.InvokeVoidAsync("editCanvaseTop", "myCanvas", true);
        isCanDraw = true;
        dotNetObjectReference = DotNetObjectReference.Create(this);
        await jsRuntime.InvokeVoidAsync("initCanvas", dotNetObjectReference);
    }

    private async Task RoiDrawClick()
    {
        await jsRuntime.InvokeVoidAsync("editCanvaseTop", "roiCanvas", true);
        await jsRuntime.InvokeVoidAsync("editCanvaseTop", "myCanvas", false);
        dotNetObjectReference = DotNetObjectReference.Create(this);
        await RoiCanvasSingleRectModule.InvokeVoidAsync("initCanvasDrawRect", dotNetObjectReference, "roiCanvas", true);
    }

    private async Task ClearDrawClick()
    {
        isCanDraw = false;
        await jsRuntime.InvokeVoidAsync("clearCanvas");
    }

    private async Task DeleteRectClick()
    {
        await jsRuntime.InvokeVoidAsync("deleteDraw", SelectRect?.Id);
    }

    private async Task UpdateClick()
    {
        await jsRuntime.InvokeVoidAsync("resizeImage", "divCanvas", Width, Height);
    }
}
